<template>
  <div class="login" :class="{'login-bg': loadBackground}">
    <div class="login-wrap">
      <div class="wrap-left">
        <div class="img-box">
          <img
            class="avatar"
            src="@/common/image/icon/icon-logo-white.png"
          >
          </div>
        <el-carousel
          height="283px"
          class="carousel"
          arrow="never"
        >
          <el-carousel-item>
            <img
              class="img1"
              src="@/common/image/icon/icon-docker.png"
            >
            <h3>全面拥抱Docker</h3>
            <content class="content">
              所有任务运行在Docker容器中，用户可以定制个性化环境，一次配置，随处运行。
            </content>
          </el-carousel-item>
          <el-carousel-item>
            <img
              class="img2"
              src="@/common/image/icon/icon-lnyos-f1.png"
            >
            <h3>Web端提交任务</h3>
            <content class="content">
              <ul>
                <li>Web端提交任务</li>
                <li>可视化显示资源利用率</li>
                <li>Web端查看任务日志</li>
              </ul>
            </content>
          </el-carousel-item>
          <el-carousel-item>
            <img
              class="img3"
              src="@/common/image/icon/icon-lnyos-f2-white.png"
            >
            <h3>分布式训练的支持</h3>
            <content class="content">
              便捷的分布式训练支持。一次作业提交中可包含多个子任务，各子任务之间通过环境变量可以感知对方，可进行跨机器的多任务训练。
            </content>
          </el-carousel-item>
          <el-carousel-item>
            <img
              class="img4"
              src="@/common/image/icon/icon-lnyos-f3-white.png"
            >
            <h3>免去运维压力</h3>
            <content class="content">
              灵活的计算资源配置，高可用的架构设计，可靠的容灾自动恢复
            </content>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="wrap-right">
        <h3>登录</h3>
        <el-form
          class="form"
          :model="loginForm"
          :rules="rulesForm"
          ref="loginForm"
          @submit.native.prevent
        >
          <el-form-item prop="userName">
            <el-input
              class="input"
              v-model="loginForm.userName"
              autocomplete="off"
              placeholder="输入Email邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              class="input"
              @keyup.enter.native="submitForm('loginForm')"
              v-model="loginForm.password"
              autocomplete="off"
              placeholder="登录密码"
            ></el-input>
          </el-form-item>
          <div class="forget-password-box">
            <div class="forget-password" @click="forgotPasswordFun">忘记密码？</div>
          </div>
          <el-form-item class="footer">
            <el-button
              class="button-left"
              type="primary"
              @click="submitForm('loginForm')"
            >登 录</el-button>
            <el-button
              class="button-right"
              @click="register"
            >注 册</el-button>
          </el-form-item>
          <div class="other-login">
            <!-- <span>其他登录方式：</span><i class="login-wechat" /><i class="login-qq" /><i class="login-github" /> -->
          </div>
          <div class="charging-tips">
            <span class="tips">平台将于2019.10.10日启动算力收费方案</span>
            <a class="detail" @click="linkTo('/chargingtips')">查看详情</a>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script scoped>
import store from '@/store'
import { login, getSession } from '@/api/user'
import { getUserInfo } from '@/api/bitahub'
import { RSAKEY, encryptedString } from '@/common/js/ras'
import { mapMutations } from 'vuex'

export default {
  data () {
    const validateEmail = (rule, value, callback) => {
      const result = /^([a-zA-Z0-9._-])+@([A-Za-z0-9d]+[-.])+[A-Za-zd]{2,5}$/.test(value)
      if (!result) {
        callback(new Error('邮箱格式不正确'))
      } else {
        callback()
      }
    }
    const validatePassWord = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能小于6位'))
      } else {
        callback()
      }
    }
    return {
      carousel1: {
        img: '@/common/image/icon/icon-docker.png',
        title: '全面拥抱Docker',
        content: '所有任务运行在Docker容器中，用户可以定制个性化环境，一次配置，随处运行。'
      },
      carousel2: {
        img: '@/common/image/icon/icon-docker.png',
        title: '更直观的交互页面',
        content: [
          'Web端提交任务',
          '可视化显示资源利用率',
          'Web端查看任务日志'
        ]
      },
      carousel3: {
        img: '@/common/image/icon/icon-docker.png',
        title: '分布式训练的支持',
        content: '便捷的分布式训练支持。一次作业提交中可包含多个子任务，各子任务之间通过环境变量可以感知对方，可进行跨机器的多任务训练。'
      },
      // 表单数据
      loginForm: {
        userName: '',
        password: ''
      },
      token: '',
      userId: '',
      bitaToken: '',
      // 表单验证规则
      rulesForm: {
        userName: [
          { required: true, message: '请输入账户名', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: validatePassWord, trigger: 'blur' }
        ]
      },
      loadBackground: false
    }
  },
  methods: {
    // 提交登录表单
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this._login()
        } else {
          return false
        }
      })
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 注册
    register () {
      window.open(`${process.env.VUE_APP_BITA_REGISTER}`)
    },
    // 跳转
    linkTo (path) {
      this.$router.push({ path })
    },
    /*
      -----接口调用-----
    */
    // 忘记密码
    forgotPasswordFun () {
      this.$router.push({ path: '/loginout' })
    },
    // 登录
    _login () {
      let pwd = this.loginForm.password
      let encrytedPwd = encryptedString(RSAKEY(), pwd)
      let data = `?username=${this.loginForm.userName}&password=${encrytedPwd}`
      login(data).then(res => {
        if (res.message.code === 0) {
          let userInfo = res.data
          this.setUserInfo(userInfo)
          const query = `?token=${userInfo.bitaToken}`
          getUserInfo(query).then(res => {
            if (res.code === 0) {
              userInfo = { ...res.result, ...userInfo }
              this.setUserInfo(userInfo)
            } else {
              this.$message({ message: res.msg, showClose: true, type: 'error' })
            }
            this.$router.push({ path: '/project/list' })
          })
        } else {
          if (res.message.code === 4) {
            this.$message({ message: '账户名或密码错误', showClose: true, type: 'error' })
          } else if (res.message.code === 5) {
            this.$message({ message: '用户不存在，请先注册', showClose: true, type: 'error' })
          } else if (res.message.code === 6) {
            this.$message({ message: '请先申请成为开发者', showClose: true, type: 'warning' })
            setTimeout(function () {
              window.open(`${process.env.VUE_APP_BITA_APPLY}?userId=${res.data}&source=bita`)
            }, 2000)
          } else {
            this.$message({ message: res.message.message, showClose: true, type: 'error' })
          }
        }
      })
    },
    click () {
      let data = {
        token: this.token,
        bitaToken: this.bitaToken
      }
      getSession(data).then(res => {
        if (res.message.code === 0) {
          this.$message({ message: res.message.message, showClose: true, type: 'success' })
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    ...mapMutations({
      setUserInfo: 'SET_USERINFO',
      setLogOut: 'LOG_OUT'
    })
  },
  created: function () {
    // this.setLogOut()
  },
  mounted () {
    this.loadBackground = true
    if (store.state.userInfo.token && store.state.userInfo.bitaToken) this.$router.push({ path: '/project/list' })
  }
}
</script>

<style lang="stylus">
@import "../../common/stylus/mixin"
@import "../../common/stylus/base"
.login
  background #f5f7fa
  height 100%
  width 100%
  display flex
  align-items center
  justify-content center
  .login-wrap
    width 760px
    height 385px
    box-shadow 0 10px 20px 0 rgba(37,40,42,.05), 0 0 1px 0 rgba(37,40,42,.15)
    background #ffffff
    .wrap-left
      width 278px
      height 100%
      background #1787FF
      display inline-block
      .img-box
        height 36px
      .avatar
        width 108.9px
        height 16px
        padding 10px
        float right
      .carousel
        padding 33px
        overflow hidden
        img
          width 80px
          height 58px
        .img2
          width 63px
          height 60px
        .img3
          width 58px
          height 60px
        .img4
          width 65px
          height 60px
        h3
          font-weight 600
          font-size 20px
          color #FFFFFF
          text-align left
          padding 37px 0
        .content
          font-size 14px
          color #FFFFFF
          text-align left
          line-height 20px
          ul
            padding-left 20px
          li
            font-size 14px
            color #fff
            text-align left
            list-style disc
    .wrap-right
      height 100%
      float right
      width 482px
      padding 38px 89px
      box-sizing border-box
      position relative
      h3
        font-weight 600
        font-size 24px
        color #34495E
        margin-bottom 21px
      .forget-password-box
        width 100%
        height 20px
      .forget-password
        float right
        cursor pointer
        font-size 12px
        color #375067
      .footer
        .button-left
          width 134.6px
          border-radius 4px
          border none
        .button-right
          width 134.6px
          float right
          background #ECF0F1
          border-radius 4px
          border none
      .other-login
        font-size 12px
        color #999999
        position absolute
        bottom 40px
        .login-wechat
          display inline-block
          width 22px
          height 20px
          background url(../../common/image/icon/icon-login-wechat.png) no-repeat
          background-size 100%
        .login-qq
          display inline-block
          width 19px
          height 20px
          background url(../../common/image/icon/icon-login-qq.png) no-repeat
          background-size 100%
        .login-github
          display inline-block
          width 18px
          height 20px
          background url(../../common/image/icon/icon-login-github.png) no-repeat
          background-size 100%
        span
          float left
          line-height 20px
          margin-right 11px
        i
          margin-right 7px
      .charging-tips
        width 110%
        padding-top 24px
        .tips
          font-size 14px
          color #333
        .detail
          padding-left 10px
          font-size 14px
          color #f00
          font-weight 600
    .el-input__inner
      background #F5F5F5
      border-radius 8px
      border-color #ffffff
    .is-error .el-input__inner
      border-color #f56c6c!important
    .is-success .el-input__inner
      border-color #67c23a!important
    .el-carousel__button
      width 1px
.login-bg
  background url(../../common/image/login-bg.jpg) no-repeat
  background-size cover
</style>
